<!DOCTYPE html>
<html>
<head>
    <title>F-x Graph</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physics-graph" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physics-graph');
        const ctx = canvas.getContext('2d');

        // Style defaults
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';

        // Coordinate system parameters
        const originX = 60;
        const originY = 320;
        const scaleX = 24;
        const scaleY = 22;

        // Coordinate mapping function
        function map(x, y) {
            return {
                cx: originX + x * scaleX,
                cy: originY - y * scaleY
            };
        }

        // 1. Draw Axes
        ctx.lineWidth = 1.5;
        ctx.font = '16px Arial';

        ctx.beginPath();
        // X-axis
        let p_x_start = map(-0.5, 0);
        let p_x_end = map(17, 0);
        ctx.moveTo(p_x_start.cx, p_x_start.cy);
        ctx.lineTo(p_x_end.cx, p_x_end.cy);
        // Y-axis
        let p_y_start = map(0, -0.5);
        let p_y_end = map(0, 12);
        ctx.moveTo(p_y_start.cx, p_y_start.cy);
        ctx.lineTo(p_y_end.cx, p_y_end.cy);
        ctx.stroke();

        // Add arrowheads
        // X-axis arrow
        ctx.beginPath();
        ctx.moveTo(p_x_end.cx, p_x_end.cy);
        ctx.lineTo(p_x_end.cx - 10, p_x_end.cy - 5);
        ctx.lineTo(p_x_end.cx - 10, p_x_end.cy + 5);
        ctx.closePath();
        ctx.fill();
        // Y-axis arrow
        ctx.beginPath();
        ctx.moveTo(p_y_end.cx, p_y_end.cy);
        ctx.lineTo(p_y_end.cx - 5, p_y_end.cy + 10);
        ctx.lineTo(p_y_end.cx + 5, p_y_end.cy + 10);
        ctx.closePath();
        ctx.fill();

        // 2. Draw Ticks and Labels
        ctx.lineWidth = 1;
        ctx.fillStyle = 'black';

        // X-axis ticks and labels
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        const x_ticks = [5, 10, 15];
        x_ticks.forEach(x => {
            let p = map(x, 0);
            ctx.fillText(x, p.cx, p.cy + 5);
        });
        
        // Origin label
        ctx.textAlign = 'right';
        ctx.textBaseline = 'top';
        ctx.fillText('O', originX - 5, originY + 5);
        
        // X-axis label
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('x/m', p_x_end.cx + 5, p_x_end.cy);

        // Y-axis ticks and labels
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        const y_ticks = [10];
        y_ticks.forEach(y => {
            let p = map(0, y);
            ctx.fillText(y, p.cx - 8, p.cy);
        });

        // Y-axis label
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('F/N', p_y_end.cx, p_y_end.cy - 10);

        // 3. Draw Dashed Lines
        ctx.save();
        ctx.setLineDash([4, 4]);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1;

        // Vertical dashes
        let p5_0 = map(5, 0);
        let p5_10 = map(5, 10);
        ctx.beginPath();
        ctx.moveTo(p5_0.cx, p5_0.cy);
        ctx.lineTo(p5_10.cx, p5_10.cy);
        ctx.stroke();

        let p10_0 = map(10, 0);
        let p10_10 = map(10, 10);
        ctx.beginPath();
        ctx.moveTo(p10_0.cx, p10_0.cy);
        ctx.lineTo(p10_10.cx, p10_10.cy);
        ctx.stroke();

        // Horizontal dash
        let p0_10 = map(0, 10);
        ctx.beginPath();
        ctx.moveTo(p0_10.cx, p0_10.cy);
        ctx.lineTo(p10_10.cx, p10_10.cy);
        ctx.stroke();

        ctx.restore();

        // 4. Draw the Graph line (the trapezoid)
        ctx.beginPath();
        ctx.lineWidth = 2.5; // Make the graph line thicker
        let p0_0 = map(0, 0);
        let p1_graph = map(5, 10);
        let p2_graph = map(10, 10);
        let p3_graph = map(15, 0);

        ctx.moveTo(p0_0.cx, p0_0.cy);
        ctx.lineTo(p1_graph.cx, p1_graph.cy);
        ctx.lineTo(p2_graph.cx, p2_graph.cy);
        ctx.lineTo(p3_graph.cx, p3_graph.cy);
        ctx.stroke();

        // 5. Draw Bottom Text
        ctx.font = '22px "KaiTi", "STKaiti", serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('习题 2-13 图', canvas.width / 2, canvas.height - 15);

    </script>
</body>
</html>